<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/mui.picker.min.css" />
    <style type="text/css">
    	.content{
    		border-top: 5px solid #eeeeee;
    		background: transparent;
    	}
    	.title{
    		height: 35px;
    		background: #FFF;
    		margin: 5px 0;
			width: 135%;
			overflow: scroll;
    	}
    	.title div{
    		color: #999;
    		display: inline-block;
    		width: 32%;
    		text-align: center;
    		font-size: 1.6rem;
    		line-height: 30px;
    		width: 25%;
    		float: left;
    	}
    	::-webkit-scrollbar {
		    width: 0px;
		    height: 0px;
		}
		::-webkit-scrollbar-thumb {
		    border-radius: 5px;
		    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		    background: rgba(0, 0, 0, 0.2);
		} 
    	.title-active span{
    		color: rgb(60,163,255);
    	}
    	.title-active:before{
    		content: '';
		    display: block;
		    width: 40px;
		    height: 3px;
		    left: 40px;
		    bottom: -32px;
		    background: #3CA3FF;
		    position: relative;
    	}
    	.intro{
    		background: #fff;
    		color: #666;
    		font-size: 1.6rem;
			padding: 10px;	
    	}
    	.search{
    		background: #fff;
    		height: 50px;
    	}
    	#search{
    		background-color: #eee;
			border: none;
			height: 30px;
			width: 70%;
			border-radius: 18px;
			text-indent: 7px;
    	}
		input::-webkit-input-placeholder {
		  /* WebKit browsers */
		  text-align: right;
		}
		input:-moz-placeholder {
		  /* Mozilla Firefox 4 to 18 */
		  text-align: right;
		}
		input:-ms-input-placeholder {
		  /* Internet Explorer 10 */
		  text-align: right;
		}
		input::placeholder {
		  text-align: right;
		}
		textarea{
			border: none;
			font-size: 1.4rem;
		}
		.process-pic{
			margin-top: 10px;
			background: #fff;
		}
		.process-pic div{
			width: 32%;
			margin: 25px 0;
		}
		.process-pic div{
			text-align: center;
			display: inline-block;
		}
		.process-pic div img{
			width: 75%;
		}
		.sign-btn{
			width: 100%;
			height: 150px;
			text-align: center;
			background: #fff;
		}
		.sign-btn div{
			height:40px;
			width: 100px;
			background: #3CA3FF;
			color: #fff;
			font-size: 1.6rem;
			line-height: 40px;
			margin: 0 auto;
			border-radius:12px ;
			margin-bottom: 20px;
		}
		.add-work{
			height: 40px;
			line-height: 40px;
			background: #fff;
			margin-top: 10px;
			padding: 0 15px;
		}
		.add-work p{
			text-align: right;
			color: #3CA3FF;
			font-size: 1.6rem;
			font-weight: bold;
		}
		.icon-add{
			font-size: 1.8rem;
			margin-left: 8px;
		}
		.sub-btn{
			text-align: center;
			width: 100%;
			height: 50px;
			color: #fff;
			background: #3CA3FF;
			line-height: 50px;
			font-size: 2rem;
			margin-top: 20px;
		}
		
    </style>
</head>
<body>
	<header class="nav">
		<i class="iconfont icon-fanhui" style="float: left;"></i>
	    <span>事项详情</span>
	</header>
	<div style="overflow: scroll;width: 100%;">
		<div class="title">
			<div class="title-active" id="basic"><span>签收批转</span></div>
			<div id="study" style="border-left: 1px solid #eeeeee;border-right: 1px solid #eeeeee;"><span>详细信息</span></div>
			<div id="example" style="border-right: 1px solid #eeeeee;"><span>流转记录</span></div>
			<div id="comment"><span>评价内容</span></div>
		</div>
	</div>
	<div>
		<div class="content basic">
			<form action="" >
				<div class="input-group">
					<label>标题：</label>
					<input value="关于xxx项目" />
				</div>
				<div class="input-group">
					<label>反馈期限：</label>
					<input type="text" class="date-select" data-options='{}'value="2017-10-10 10:10" >
				</div>
				<div class="input-group">
					<label>国土局领导:</label>
				</div>
				<textarea name="" rows="" cols="">可承受的疯狂拉升讲道理三</textarea>
			</form>
			<div class="process-pic">
				<div>
					<img src="img/sa_03.png"/>
				</div>
				<div>
					<img src="img/sa_05.jpg"/>
				</div>
				
			</div>
			<form action="" style="margin-top: 10px;">
				<div class="input-group">
					<label>审批意见:</label>
				</div>
				<textarea name="" rows="" cols="" placeholder="">内容内容内容内容内容内容内容</textarea>
				
				<div class="input-group">
					<label style="width: 66%;color: #333;">是否完成</label>
					<div style="display: inline-block;"><input name="xx" type="radio"/>同意 </div>
	                <div style="display: inline-block;"><input name="xx" type="radio"/>不同意</div>
				</div>
				<div class="input-group">
					<label>审批人员:</label>
					<select name="">
						<option value="">分管领导A</option>
					</select>
				</div>
			</form>
			<div class="sub-btn">
				提交
			</div>
		</div>
		<div class="content study" style="display: none;">
			
		</div>
		<div class="content example" style="display: none;">
			
		</div>
		<div class="content comment" style="display: none;">
			
		</div>
	</div>
	
	<script type="text/javascript" src="js/mui.min.js" ></script>
    <script type="text/javascript" src="js/mui.picker.min.js" ></script>
    <script src="js/common.js"></script>
    <!--模板-->
    
    <script>
    	window.onload=function(){
    		
    		//点击切换模块
    		function toggle(box){
    			console.log(box);
    			document.getElementById(box).addEventListener('click',function(){
    				var x=this.parentNode.children;
    				for(var i=0;i<3;i++){
    					x[i].classList.remove('title-active');
    				}
    				this.classList.add('title-active');
    				var p=document.querySelector('.'+box).parentNode.children;
    				for(var i=0;i<3;i++){
    					p[i].style.display='none';
    				}
    				document.querySelector('.'+box).style.display='block';
    			})
    		}
    		toggle('comment');
    		toggle('study');
    		toggle('basic');
    		toggle('example');
    		//签收点击切换状态
    		var child=document.querySelector('.process-pic').getElementsByTagName('div');
    		console.log(child);
    		for (var i=0;i<child.length;i++) {
    			child[i].addEventListener('click',function(){
					if(this.firstElementChild.getAttribute('src').indexOf('sa')>-1){
						this.firstElementChild.setAttribute('src',this.firstElementChild.getAttribute('src').replace('sa','ed'))
					}else{
						this.firstElementChild.setAttribute('src',this.firstElementChild.getAttribute('src').replace('ed','sa'))
					}
    			})
    		}
    	}
    </script>
</body>
</html>
